
<!DOCTYPE html>
<html lang="en">
<head>
    <title>注册/登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js/global_data.js"></script>
    <!-- animation css files -->
    <link rel="stylesheet" href="Login/css/animation-aos.css">
    <link href="Login/css/bootstrap.css" rel='stylesheet' type='text/css' /><!-- bootstrap css -->
    <link href="Login/css/style.css" rel='stylesheet' type='text/css' /><!-- custom css -->
    <link href="Login/css/fontawesome-all.css" rel="stylesheet"><!-- fontawesome css -->
    <link rel="stylesheet" href="Login/css/drag.css">
</head>
<body>
<!-- header -->
<header class="index-banner">
    <!-- nav -->
    <nav class="main-header">
        <div id="brand" data-aos="zoom-in-up">
            <div>
                <i class="fab fa-ravelry  fa-2x" style="color: white"></i>
            </div>
            <div id="word-mark">
                <h1>
                    <a href="login.html">hBUE</a>
                </h1>
            </div>
        </div>
        <div id="menu">
            <div id="menu-toggle">
                <div id="menu-icon">
                    <div class="bar"></div>
                    <div class="bar"></div>
                    <div class="bar"></div>
                </div>
            </div>
            <ul class="text-center text-capitalize nav-agile" data-aos="zoom-in-up">
                <li>
                    <a href="" class="active">联系我们</a>
                </li>
                <li>
                    <a href="javascript:forgetpassword()" id="find" class="scroll">忘记密码</a>
                </li>
                <li>
                    <button id="superUserLogin" type="button" class="btn btn-info" data-toggle="modal" aria-pressed="false" data-target="#exampleModalCenter2" style="border-color: rgba(255,255,255,0.6);background: rgba(0,188,212,0.0)">
                        管理员登录
                    </button>
                </li>
                <li>
                    <button id="normalUserLogin" type="button" class="btn btn-info" data-toggle="modal" aria-pressed="false" data-target="#exampleModalCenter2" style="border-color: rgba(255,255,255,0.6);background: rgba(0,188,212,0.0)">
                        登录
                    </button>
                </li>
            </ul>
        </div>
    </nav>
    <!-- //nav -->
    <!-- banner -->
    <div class="banner layer" id="home">
        <div class="container">
            <div class="row banner-text">
                <div class="slider-info col-lg-8">
                    <div class="agileinfo-logo mt-5">
                        <h2 data-aos="fade-down">
                            <i class="fa fa-cubes" aria-hidden="true"></i><br>五子棋  --
                        </h2>
                    </div><br>
                    <h3 class="txt-w3_agile" data-aos="fade-down">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;多语言算法对垒系统</h3>
                    <a class="btn mt-4 mr-2 text-capitalize" data-aos="fade-up" href="#" data-toggle="modal" data-target="#exampleModalCenter1" role="button" style="border-radius: 20px">了解更多</a>
                    <a class="btn mt-4 text-capitalize" data-aos="fade-up" href="#" data-toggle="modal" data-target="#exampleModal" role="button" style="border-radius: 20px">比赛规则</a>
                </div>
                <div class="col-lg-4 col-md-8 mt-lg-0 mt-5 banner-form" data-aos="fade-left">
                    <br>
                    <h5><i class="fas mr-2 fa-laptop"></i>注册</h5><br>
                    <div class="mt-4" style="margin-left: 20px">
                        <input id="RegisterEmail" class="form-control" style="border-radius: 20px" type="email" name="email" placeholder="邮箱:" required="" autocomplete="off" />
                        <input id="RegisterPassword" class="form-control" style="border-radius: 20px" type="password" name="password" placeholder="密码:" required="" autocomplete="new-password" />
                        <input id="RegisterName" class="form-control" style="border-radius: 20px" type="text" name="name" placeholder="昵称:" required="" autocomplete="off" />
                        <br>
                        <button id="RegisterNow" class="form-control text-capitalize" style="background: rgba(1,1,1,0.0);border-radius: 20px;color: white;text-align: center;padding-top: 4.5%;padding-bottom: 4.5%;border: solid 1.5px rgba(255,255,255,0.7)">立即注册</button>
                    </div>
                </div>
            </div>
        </div>
        <p style="color: white;top:93%;left: 37%;position: absolute">Copyright &nbsp;&copy; 2020&nbsp;-&nbsp;湖北经济学院 &nbsp;吴永康 &nbsp;曹晓阳</p>
    </div>

    <!-- //banner -->

</header>

<!-- Vertically centered Modal -->
<div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-capitalize text-center" id="exampleModalLongTitle"> <i class="fab fa-blackberry"></i>系统简介</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img src="Login/images/banner2.jpg" class="img-fluid mb-3" alt="Modal Image" />随着计算机行业全球化的发展趋势，IT行业的人才稀缺，国内外研究了许多程序设计算法平台来培养IT行业的人才。比较典型的算法平台有北京大学POJ、蓝桥杯大赛练习系统、浙江大学PTA、南洋理工NYOJ。它们主要用于大学生进行在线算法练习，系统中有大量的题库，涉及多方面的算法训练，可以培养专业人才参加国内外ACM算法竞赛与蓝桥杯大赛等。但这些平台太过于枯燥乏味，大量的题库导致学生们练习一段时间就失去耐心，并且有的题目过难，长时间无法攻克难题会导致新手对自己丧失信心。为了解决国内外目前对该类型平台研究的缺陷，我们将算法对战平台系统与五子棋相结合，可以有效提高同学们学习和研究算法的积极性。平台支持多种高级语言，对战双方通过提交算法来决定每一步棋的下法，服务器在线进行编译

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- //Vertically centered Modal -->

<!--/Login-->
<div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="userLoginBox">
                <div class="login px-4 mx-auto mw-100">
                    <h5 class="text-center mb-4">登录</h5>
                    <form method="post">
                        <div class="form-group">
                            <label class="mb-2">邮箱</label>
                            <input id="LoginEmail" type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="" required="">
                        </div>
                        <div class="form-group">
                            <label class="mb-2">密码</label>
                            <input id="LoginPassword" type="password" class="form-control" name="password" placeholder="" required="">
                        </div>
                        <div align="center">

                            <button type="button" onclick="login()" class="btn btn-info submit mt-2" style="border-color: rgba(0,188,212,1.00);background: rgba(0,188,212,1.00)">登录</button>
                            <p class="text-center pb-4">
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="shadow" style="z-index: 1000000;position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;background: rgba(0,0,0,0.5);display: none">
    haha
    <div class="modal" id="exampleModalCenter3" tabindex="-1" role="dialog" style="display: none">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="myclose">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h5 class="text-center mb-4">找回密码</h5>
                    <div class="login px-4 mx-auto mw-100" id="next1">
                        <div class="form-group">
                            <input type="email" class="form-control" id="findemail" style="margin-top: 10%;border-radius: 17px" aria-describedby="emailHelp" placeholder="请输入您的邮箱" required="">
                            <input type="text" class="form-control" id="changedpassword" style="margin-top: 10%;border-radius: 17px" aria-describedby="emailHelp" placeholder="请输入您想修改后的密码" required>
                        </div>
                        <div align="center">
                            <div id="drag" style="margin: 10%;"></div>
                            <hr style="height:1px;border:none;border-top:1px solid lightgray;width: 90%" />
                            <span style="color: grey;font-family: 幼圆;">（请滑动验证条进行下一步操作）</span>
                        </div>
                    </div>
                    <div class="login px-4 mx-auto mw-100" id="next2" style="display: none">
                        <div class="form-group">
                            <input id="keyWord" class="form-control" style="margin-top: 10%;border-radius: 17px" aria-describedby="emailHelp" placeholder="请输入十六位验证码:xxxx-xxxx-xxxx-xxxx" required="">

                        </div>
                        <span style="color: grey;font-family: 幼圆;">为了您的账号安全，请在5分钟内输入您邮箱收到的16位验证码，过期失效</span>
                        <div align="center">
                            <p style="font-size: 22px;font-family: 华文行楷;color: grey;" id="mytime"></p>
                            <hr style="height:1px;border:none;border-top:1px solid lightgray;width: 90%" />
                            <button id="ok" onclick="SubmitChangePassword()" class="btn btn-info submit mt-2" style="border-color: rgb(131,196,119);background: rgb(131,196,119)">确认找回</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- js -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="Login/js/canvas.js"></script>
<script src="Login/js/jquery-2.2.3.min.js"></script>
<script src="Login/js/bootstrap.js"></script>
<script src='Login/js/aos.js'></script>
<!--drag.js就是登陆页面的js文件-->
<script src="Login/js/drag.js"></script>
<script src="Login/js/responsiveslides.min.js"></script>
<script src="Login/js/smoothscroll.js"></script>
<script src="Login/js/move-top.js"></script>
<script src="Login/js/easing.js"></script>
<script>
    // 页面加载的时候判断用户有没有登录信息，有的话自动登录跳转
    $.ajax({
        async: false,
        type: "post",
        data:'{"userToken":"'+localStorage.getItem("userToken")+'"}',
        url: serverIpAddress+"User/LodeUserMessage",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success:function () {
            window.location="CodeAndCode.html";
        }
    });
    $("#normalUserLogin").click(function () {
        $("#userLoginBox>div>h5").text("登录");
    });

    $("#superUserLogin").click(function () {
       $("#userLoginBox>div>h5").text("管理员登录");
    });

    $("#RegisterNow").click(function () {
        var registeremail = $("#RegisterEmail").val();
        var registername = $("#RegisterName").val();
        var registerpassword = $("#RegisterPassword").val();
        var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(registeremail=="") {
            alert("邮箱不能为空");
        }
        else if(registername=="") {
            alert("昵称不能为空");
        }
        else if(registerpassword=="") {
            alert("密码不能为空");
        }
        else if(reg.test(registeremail)){
            var data = '{"email":"'+registeremail+'","password":"'+registerpassword+'","name":"'+registername+'"}';
            $.ajax({
                async:false,
                type:"post",
                url:serverIpAddress+"User/Register",
                contentType:"application/json;charset=utf-8",
                data:data,
                success:function (data) {
                    if(data=="1") {
                        alert("该邮箱已被注册");
                    }
                    else if(data=="2") {
                        alert("该昵称已存在");
                    }
                    else {
                        alert("注册成功！");
                        window.location.reload();
                    }
                }
            });
        }
    });
    function login() {
        var email = document.getElementById("LoginEmail").value;
        var password = document.getElementById("LoginPassword").value;
        let user={"email":email,"password":password};
        if($("#userLoginBox>div>h5").text() === "管理员登录") {
            axios.post(serverIpAddress+"SuperUser/superUserVerify", user).then((res) => {
                if (res.data.result=="success") {
                    localStorage.setItem("superUserToken",res.data.superUserToken);
                    window.location = "SuperUser.html";
                } else if(res.data.result === "EmailError") {
                    alert("该邮箱尚未注册");
                }
                else {
                    alert("密码错误");
                }
            });
        }
        else {
            axios.post(serverIpAddress+"User/LoginVerify", user).then((res) => {
                if (res.data.result=="success") {
                    localStorage.setItem("userToken",res.data.userToken);
                    window.location = "CodeAndCode.html";
                } else if(res.data.result === "EmailError") {
                    alert("该邮箱尚未注册");
                }
                else {
                    alert("密码错误");
                }
            });
        }
    }

    $("#drag").drag();
    AOS.init({
        easing: 'ease-out-back',
        duration: 1000
    });
    $(".banner").css("height",$(this).height()+"px");
    $(window).resize(function() {
        var myheight = $(this).height();
        $(".banner").css("height",myheight+"px");
    });


    //找回密码的5分钟倒计时全局变量
    var min,sec;
    var Interval;
    //mytime就是Interval定时的函数
    function mytime() {
        sec--;
        if(sec<0) {
            sec=59;
            min--;
        }
        if(min<0) {
            localStorage.removeItem("sendEmailStartTime");
            localStorage.removeItem("forgotUser");
            clearInterval(Interval);
            window.location.reload();
        }
        var m1="",s1="";
        if(sec<10) {
            s1="0"+sec;
        }
        else {
            s1=sec;
        }
        if(min<10) {
            m1="0"+min;
        }
        else {
            m1=min;
        }
        $("#mytime").html(m1+"："+s1);
    }
    //用户点击找回密码后触发的方法
    function forgetpassword() {
        //把找回密码窗口显示出来
        $("#shadow").show();
        $("#exampleModalCenter3").slideDown(300);
        $("#myclose").click(function(){
            $("#exampleModalCenter3").slideUp(300,function(){
                $("#shadow").hide();
                $("#next2").hide();
                $("#next1").show();
            });
        });

        if(localStorage.getItem("sendEmailStartTime")!=null) {
            $("#next1").hide();
            $("#next2").show();
        }
    }
    // time代表当前找回密码的剩余时间
    let time = new Date().getTime()-Number(localStorage.getItem("sendEmailStartTime"));
    // 如果剩余时间在5分钟以内，就开始执行定时器
    if(time<=300000) {
        var soon = 300000 - time;
        min = Math.floor(soon/60000);
        sec = Math.floor((soon - min*60000)/1000);
        Interval=setInterval("mytime()",1000);
    }//如果已经超过，那么就清空和邮箱找回相关的localStorage
    else {
        localStorage.removeItem("sendEmailStartTime");
        localStorage.removeItem("forgotUser");
    }
</script>
</body>
</html>
